<template>
  <div class="createCenter">
    <el-icon @click="handleClose" class="icon-close"><CloseBold /></el-icon>
    <div class="title-bar">
      <div
        :class="{ 'active-item': centerTitle === '稿件预览' }"
        class="bar-item"
        @click="handleChangeCurrent('稿件预览')"
      >
        稿件预览
      </div>
      <div
        :class="{ 'active-item': centerTitle === '稿件列表' }"
        class="bar-item"
        style="margin-left: 4px"
        @click="handleChangeCurrent('稿件列表')"
      >
        稿件列表
      </div>
    </div>
    <div class="tips" v-show="centerTitle === '稿件列表'">
      此处仅展示最新稿件,详情请前往PC端查看
    </div>
    <div class="manuscriptList" v-show="centerTitle === '稿件列表'">
      <div
        class="manuscript-item"
        v-for="(item, index) in manuscriptList"
        :key="index"
      >
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="manuscriptList-preview" v-show="centerTitle === '稿件预览'">
      <div class="manuscriptList-title">{{ currentManuscript.name }}</div>
      <div
        class="manuscriptList-content"
        v-html="currentManuscript.content"
      ></div>
      <div class="operation-button">
        <img
          @click="handleEditOpen"
          src="@/assets/image/mobile/mine/manuscript-edit.png"
          style="height: 34px"
          alt=""
        />
        <img
          src="@/assets/image/mobile/mine/manuscript-confirm.png"
          style="margin-left: 4px; 170px;
height: 34px;"
          alt=""
        />
      </div>
    </div>
    <!-- 修改稿件弹框 -->
    <van-dialog
      class="confirm-edit-dialog"
      close-on-click-overlay
      v-model:show="show"
      :show-confirm-button="false"
    >
      <div class="title-line">
        <span class="title">修改意见</span>
        <span class="submit">提交</span>
      </div>
      <div class="edit-content">
        <van-field
          type="textarea"
          v-model="editInfo"
          placeholder="您可以在此处写下您的想法 (请注明想要修改的稿件名称); 您也可以通过下方按钮上传图片附件."
        />
        <div class="upload-img">

        </div>
        <div class="upload-button">
            <van-icon name="add-o" />
            <span>上传图片</span>
            <span>(支持JPG/PNG/JPEG格式)</span>
        </div>
      </div>
    </van-dialog>
    <weekdiaolog ref="weekdiaologRef"></weekdiaolog>
  </div>
</template>

<script setup>
import { Clock, CloseBold } from "@element-plus/icons-vue";
import weekdiaolog from './common/weekdiaolog.vue';

const weekdiaologRef = ref(null);
const editInfo = ref("");
const show = ref(false);
const centerTitle = ref("稿件预览");
const currentManuscript = ref({
  name: "稿件名称11111、AISEO客户端正式地址www1、AISEO客户端正式地址www1、AISEO客户端正式地址www1",
  content: `1、AISEO客户端正式地址www.aiseoword.com  测试地址 https://test.aiseoword.com/
项目代码gitee https://gitee.com/mt-2021/aiseo-website-nuxt3
正式打包上传仓 https://gitee.com/liuanxinghe/official---aiseo---client-page
测试打包上传仓 https://gitee.com/liuanxinghe/test-aiseo-client-page
登录账号15183353012 密码：Qwer1234.


2、AISEO后台端正式地址 admin.aiseoword.com 测试地址 https://test.admin.aiseoword.com/#/login
项目代码gitee  https://gitee.com/mt-2021/arco-admin
正式打包上传仓 https://gitee.com/liuanxinghe/aiseo---backend-page
测试打包上传仓 https://gitee.com/liuanxinghe/aiseo-new-backend-git
登录账号mengting 密码：Qwer1234.

3、AI改写工具测试地址http://47.104.152.156:8082/#/login
项目代码gitee https://gitee.com/mt-2021/ai-rewrites-platform
测试打包地址 https://gitee.com/liuanxinghe/aitool-pc
登录账号15183353012 密码123456
1、AISEO客户端正式地址www.aiseoword.com  测试地址 https://test.aiseoword.com/
项目代码gitee https://gitee.com/mt-2021/aiseo-website-nuxt3
正式打包上传仓 https://gitee.com/liuanxinghe/official---aiseo---client-page
测试打包上传仓 https://gitee.com/liuanxinghe/test-aiseo-client-page
登录账号15183353012 密码：Qwer1234.


2、AISEO后台端正式地址 admin.aiseoword.com 测试地址 https://test.admin.aiseoword.com/#/login
项目代码gitee  https://gitee.com/mt-2021/arco-admin
正式打包上传仓 https://gitee.com/liuanxinghe/aiseo---backend-page
测试打包上传仓 https://gitee.com/liuanxinghe/aiseo-new-backend-git
登录账号mengting 密码：Qwer1234.

3、AI改写工具测试地址http://47.104.152.156:8082/#/login
项目代码gitee https://gitee.com/mt-2021/ai-rewrites-platform
测试打包地址 https://gitee.com/liuanxinghe/aitool-pc
登录账号15183353012 密码123456
1、AISEO客户端正式地址www.aiseoword.com  测试地址 https://test.aiseoword.com/
项目代码gitee https://gitee.com/mt-2021/aiseo-website-nuxt3
正式打包上传仓 https://gitee.com/liuanxinghe/official---aiseo---client-page
测试打包上传仓 https://gitee.com/liuanxinghe/test-aiseo-client-page
登录账号15183353012 密码：Qwer1234.


2、AISEO后台端正式地址 admin.aiseoword.com 测试地址 https://test.admin.aiseoword.com/#/login
项目代码gitee  https://gitee.com/mt-2021/arco-admin
正式打包上传仓 https://gitee.com/liuanxinghe/aiseo---backend-page
测试打包上传仓 https://gitee.com/liuanxinghe/aiseo-new-backend-git
登录账号mengting 密码：Qwer1234.

3、AI改写工具测试地址http://47.104.152.156:8082/#/login
项目代码gitee https://gitee.com/mt-2021/ai-rewrites-platform
测试打包地址 https://gitee.com/liuanxinghe/aitool-pc
登录账号15183353012 密码123456
`,
});
const manuscriptList = ref([
  {
    name: "稿件名称11111稿件名称11111稿件名称11111稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
  {
    name: "稿件名称11111稿件名称11111稿件名称11111稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
  {
    name: "稿件名称11111稿件名称11111稿件名称11111稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
  {
    name: "稿件名称11111稿件名称11111稿件名称11111稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
  {
    name: "稿件名称11111稿件名称11111稿件名称11111稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
  {
    name: "稿件名称11111",
  },
]);
const emits = defineEmits(["close"]);
const handleChangeCurrent = (title) => {
  centerTitle.value = title;
};
const handleEditOpen = () => {
  show.value = true;
};
const handleClose = () => {
  emits("close");
};
</script>

<style lang="scss" scoped>
.createCenter {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #fafafa;
  z-index: 21;
  padding: 16px;
  box-sizing: border-box;
  .icon-close {
    position: absolute;
    font-size: 24px;
    color: #333333;
    top: 16px;
    left: 16px;
  }
  .title-bar {
    width: 170px;
    height: 32px;
    background: #ffffff;
    margin: 0 auto;
    display: flex;
    border-radius: 27px;
    padding: 3px;
    box-sizing: border-box;
    .bar-item {
      width: 80px;
      height: 26px;
      text-align: center;
      line-height: 26px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #999999;
    }
    .active-item {
      width: 80px;
      height: 26px;
      background: #4560e6;
      border-radius: 32px 32px 32px 32px;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
    }
  }
  .tips {
    font-weight: 500;
    font-size: 12px;
    color: #ec7f20;
    margin-top: 16px;
  }
  .manuscriptList {
    width: 100%;
    height: calc(100% - 70px);
    overflow: auto;
    .manuscript-item {
      margin-top: 16px;
      padding: 10px 16px;
      border-radius: 8px;
      line-height: 14px;
      &:first-child {
        background: #ffffff;
        position: relative;
        &::after {
          content: "新";
          position: absolute;
          right: 16px;
          top: 10px;
          font-family: HelloFont WenYiHei, HelloFont WenYiHei;
          font-weight: 400;
          font-size: 9px;
          color: #e62e3d;
        }
      }
      > span {
        display: inline-block;
        max-width: calc(100% - 32px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: bold;
        font-size: 14px;
        color: #333333;
      }
    }
  }
  .manuscriptList-preview {
    width: 100%;
    height: calc(100% - 48px);
    overflow: hidden;
    padding-bottom: 65px;
    box-sizing: border-box;
    .manuscriptList-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 14px;
      color: #333333;
      text-align: center;
      margin: 0 auto;
      margin-top: 16px;
      max-width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .manuscriptList-content {
      margin-top: 16px;
      height: calc(100% - 45px);
      overflow: auto;
    }
    .operation-button {
      width: 100%;
      height: 86px;
      background: #ffffff;
      box-shadow: 0px -6px 12px 0px rgba(0, 0, 0, 0.2);
      border-radius: 0px 0px 0px 0px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 16px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
    }
  }
  :deep(.confirm-edit-dialog) {
    width: 83%;
    height: 424px;
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-sizing: border-box;
    .title-line {
      display: flex;
      justify-content: space-between;
      line-height: 16px;
      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
      }
      .submit {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #ec7f20;
      }
    }
    .edit-content {
      width: 100%;
      height: 344px;
      background: #f5f5f5;
      border-radius: 8px;
      margin-top: 16px;
      .van-cell {
        height: calc(100% - 68px);
        background: none;
        padding: 8px;
        .van-cell__value {
          height: 100%;
          .van-field__body {
            height: 100%;
            textarea {
              height: 100%;
            }
          }
        }
      }
      .van-field__control::placeholder {
        font-weight: 500;
        font-size: 12px;
        color: #999999;
      }
      .upload-img{
        width: 100%;
height: 36px;
background: #E6E6E6;
border-radius: 4px 4px 4px 4px;
      }
    }
  }
}
</style>
